<template>
	<view class="content">
		<view class="user" v-if="userInfo">
			<view>
				<view class="name" @click="$tools.to('../../pages_user/userCenter/userCenter')">
					HI~，{{userInfo.nickname}}
				</view>
				<block v-if="shenheSwitch=='0'">
					<view v-if="userInfo.is_auth==0" class="renzheng" @click="goRealnameAthentication">
						<image src="../../static/weishiming.png" mode="widthFix"></image>
						未实名
					</view>
					<view v-if="userInfo.is_auth==1" class="renzheng" @click="goRealnameAthentication">
						<image src="../../static/yishiming.png" mode="widthFix"></image>
						已实名
					</view>
					<view v-if="userInfo.is_auth==2" class="renzheng" @click="goRealnameAthentication">
						<image src="../../static/weishiming.png" mode="widthFix"></image>
						认证中
					</view>
					<view v-if="userInfo.is_auth==3" class="renzheng" @click="goRealnameAthentication">
						<image src="../../static/weishiming.png" mode="widthFix"></image>
						认证失败
					</view>
					<view v-if="userInfo.is_auth==4" class="renzheng" @click="goRealnameAthentication">
						<image src="../../static/weishiming.png" mode="widthFix"></image>
						已过期
					</view>
					<view v-if="userInfo.is_auth==5" class="renzheng" @click="goRealnameAthentication">
						<image src="../../static/weishiming.png" mode="widthFix"></image>
						已实名
					</view>
				</block>
			</view>
			<image @click="$tools.to('../../pages_user/userCenter/userCenter')" class="avatar" :src="userInfo.avatar"
				mode="aspectFill"></image>
		</view>
		<view class="user" v-else>
			<view>
				<navigator url="/pages/login/login" class="name">
					去登录
				</navigator>
			</view>
		</view>
		<view class="section-1">
			<view class="wrap">
				<navigator url="/pages_user/my_focus_on/my_focus_on" hover-class="none" class="item">
					关注 <text>{{userInfo.gz}}</text>
				</navigator>
				<navigator url="/pages_user/my_fans/my_fans" hover-class="none" class="item">
					粉丝 <text>{{userInfo.fs}}</text>
				</navigator>
			</view>
			<view class="menu">
				<navigator url="/pages_user/my_appointment/my_appointment" hover-class="none" class="item">
					<image src="../../static/my_yuyue.png" mode="widthFix"></image>
					<view>我的预约</view>
				</navigator>
				<navigator url="/pages_user/myItinerary/myItinerary" hover-class="none" class="item">
					<image src="../../static/my_xingcheng.png" mode="widthFix"></image>
					<view>我的行程</view>
				</navigator>
				<navigator url="/pages_user/myBcOrder/myBcOrder" hover-class="none" class="item">
					<image src="../../static/wdbc.png" mode="widthFix"></image>
					<view>包车订单</view>
				</navigator>
				<navigator url="/pages_user/myZcOrder/myZcOrder" hover-class="none" class="item">
					<image src="../../static/wdzc.png" mode="widthFix"></image>
					<view>租车订单</view>
				</navigator>
			</view>
		</view>
		<view class="section section-2">
			<view class="title-1">
				我的资产
			</view>
			<view class="card">
				<view class="item" v-if="shenheSwitch=='0'" @click="$tools.to('../../pages_user/myBalance/myBalance')">
					<view class="title">
						我的余额
					</view>
					<view class="num">
						{{userInfo.money || 0}}
					</view>
				</view>
				<view class="item" @click="$tools.to('../../pages_user/myIntegral/myIntegral')">
					<view class="title">
						我的积分
					</view>
					<view class="num-1">
						{{userInfo.score || 0}}
					</view>
				</view>
			</view>
		</view>

		<view class="section section-3" v-if="shenheSwitch=='0'">
			<view class="title-1">
				我的工具
			</view>
			<view class="card">
				<navigator class="item" url="/pages_user/myChartered/myChartered" hover-class="none">
					<image src="../../static/my_baoche.png" mode="widthFix"></image>
					<view>我的包车</view>
				</navigator>
				<navigator class="item" url="/pages_user/myRentCar/myRentCar" hover-class="none">
					<image src="../../static/my_zuche.png" mode="widthFix"></image>
					<view>我的租车</view>
				</navigator>
				<navigator url="/pages_user/myRoadBook/myRoadBook" hover-class="none" class="item">
					<image src="../../static/wdxl.png" mode="widthFix"></image>
					<view>我的线路</view>
				</navigator>
				<navigator class="item" url="/pages_user/my_car/my_car" hover-class="none">
					<image src="../../static/wdcl.png" mode="widthFix"></image>
					<view>我的车辆</view>
				</navigator>
			</view>
		</view>

		<view class="section section-3">
			<view class="title-1">
				其他服务
			</view>
			<view class="card">
				<view class="item" @click="goMyShop">
					<image src="../../static/my_dianpu.png" mode="widthFix"></image>
					<view>我的店铺</view>
				</view>
				<navigator v-if="shenheSwitch=='0'" class="item" url="/pages_user/InviteNewPeople/InviteNewPeople"
					hover-class="none">
					<image src="../../static/my_xinren.png" mode="widthFix"></image>
					<view>邀请新人</view>
				</navigator>
				<button class="item" open-type="contact">
					<image src="../../static/my_kufu.png" mode="widthFix"></image>
					<view>客服中心</view>
				</button>
				<view v-if="shenheSwitch=='0'" class="item" @click="applyAgency">
					<image src="../../static/cwdl.png" mode="widthFix"></image>
					<view>成为代理</view>
				</view>
			</view>
		</view>
		<!-- 发布弹窗 -->
		<n-release :openFlag="releasePopupShow" @close="closeRelease"></n-release>
		<!-- 申请代理弹窗 -->
		<n-popup ref="applyAgencyShow" :icon="applyAgencyIcon" :show="applyAgencyShow" title="已申请" desc="平台稍后与您联系"
			@confirm="$refs.applyAgencyShow.show = false"></n-popup>
		<!-- 暂无店铺弹窗 -->
		<n-popup ref="myShopShow" :icon="myShopIcon" title="提示" desc="你还没有店铺" @confirm="applyShop"
			@close="$refs.myShopShow.show = false"></n-popup>
		<!-- 顶部导航栏 -->
		<block v-if="shenheSwitch=='0'">
			<u-tabbar v-model="tabbarCurrent" :openFlag="releasePopupShow" :icon-size="48" :hide-tab-bar="true"
				inactive-color="#AAAAAA" :list="tabbarList" :mid-button="true" @change="selectTabbar"></u-tabbar>
		</block>
		<block v-else>
			<u-tabbar v-model="tabbarCurrent" :openFlag="releasePopupShow" :icon-size="48" :hide-tab-bar="true"
				inactive-color="#AAAAAA" :list="tabbarList1" :mid-button="false" @change="selectTabbar1"></u-tabbar>
		</block>



	</view>
	</view>
</template>

<script>
	import {
		tabbar
	} from '@/pages/tabbar.js'
	import {
		tabbar1
	} from '@/pages/tabbar1.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				tabbarCurrent: 4,
				tabbarList: tabbar,
				tabbarList1: tabbar1,
				releasePopupShow: false, //	发布弹窗显示
				applyAgencyShow: false,
				applyAgencyIcon: require('@/static/popup-apply.png'),
				myShopIcon: require('@/static/popup-shop.png'),
			};
		},
		onShow() {
			if (this.shenheSwitch == '0') {
				this.tabbarCurrent = 4
			} else {
				this.tabbarCurrent = 2
			}
			this.refreshUserInfo()
		},
		onHide() {
			this.releasePopupShow = false
		},
		computed: {
			...mapState({
				userInfo: (state) => state.user.userInfo,
				shenheSwitch: state => state.config.shenheSwitch
			})
		},
		onPullDownRefresh() {
			this.refreshUserInfo()
		},
		methods: {
			...mapActions(['refreshUserInfo']),

			// 实名认证
			goRealnameAthentication() {
				if (this.userInfo.is_auth == 5 || this.userInfo.is_auth == 0) {
					uni.navigateTo({
						url: '../../pages_user/realname_authentication5/realname_authentication5'
					})
				} else {
					uni.navigateTo({
						url: '../../pages_user/realname_authentication/realname_authentication'
					})
				}
			},
			// 申请成为代理
			applyAgency() {
				uni.navigateTo({
					url:'/pages_user/applyAgency/applyAgency'
				})
			},
			// 查看我的店铺
			goMyShop() {
				if (this.userInfo.shop_id == 0) {
					this.$refs.myShopShow.show = true
				} else {
					uni.navigateTo({
						url: '/pages_user/myShop/shopDetail?shopId=' + this.userInfo.shop_id
					})
				}
			},
			// 前往申请店铺
			applyShop() {
				this.$refs.myShopShow.show = false
				uni.navigateTo({
					url: '/pages_user/applyShop/applyShop'
				})
			},
			closeRelease() {
				this.tabbarCurrent = 4
				this.releasePopupShow = false
			},
			// 切换tabbar
			selectTabbar1(e) {
				uni.removeStorageSync('tabbar')
				uni.switchTab({
					url: this.tabbarList1[e].url
				})
			},
			selectTabbar(e) {
				uni.removeStorageSync('tabbar')

				if (e == 2) {
					let is_auth = uni.getStorageSync('userInfo').is_auth
					if (is_auth != 1) {
						uni.showModal({
							title: '温馨提示',
							content: '您还没有实名认证，点击确定完成认证信息',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages_user/realname_authentication/realname_authentication'
									})
								}
							}
						})
						return
					}
					this.tabbarCurrent = 4
					this.releasePopupShow = !this.releasePopupShow
					return
				} else {
					this.releasePopupShow = false
				}
				if (e === 1) {
					uni.setStorageSync('tabbar', 3)
					uni.switchTab({
						url: this.tabbarList[0].url
					})
					return
				}
				uni.switchTab({
					url: this.tabbarList[e].url
				})
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef H5 */
	.content {
		background: url(https://haipinche-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220803/f9c843a7d2e246bace203bfe13512e3b.png) no-repeat;
		background-size: contain;
		padding: 0 30upx 30upx;
		padding-top: var(--status-bar-height);
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* #endif */
	/* #ifdef H5 */
	.content {
		background: url(@/static/user_bg_h5.png) no-repeat;
		background-size: contain;
		padding: 0 30upx 30upx;
		padding-top: var(--status-bar-height);
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* #endif */


	.user {
		padding: 100upx 30upx 40upx;
		@include flex-between;

		.name {
			font-size: 36upx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.renzheng {
			margin-top: 20upx;

			image {
				width: 34upx;
				height: 34upx;
				margin-right: 10upx;
			}

			@include flex;
			font-size: 20upx;
			color: rgba(255, 255, 255, .6);
			line-height: 34upx;
			background: linear-gradient(180deg, #1B2420 0%, #1B2420 100%);
			border-radius: 34upx;
			width: 140upx;
		}

		.avatar {
			width: 108upx;
			height: 108upx;
			border-radius: 100%;
			border: 1upx solid #fff;
		}
	}

	.section-1 {
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 20upx 26upx;

		.wrap {
			height: 80upx;
			background: rgba(81, 157, 118, .1);
			border-radius: 16upx;
			@include flex-between;
			padding: 0 86upx;

			.item {
				font-size: 24upx;
				color: RGBA(107, 109, 108, 1);
				@include flex;

				text {
					margin-left: 24upx;
					font-size: 34upx;
					font-weight: bold;
					color: #333333;
					opacity: 0.95;
				}
			}
		}

		.menu {
			@include menu-list(4) .item {
				padding: 36upx 0 16upx;

				image {
					width: 60upx;
					height: 60upx;
				}

				view {
					font-size: 24upx;
					color: #333333;
					margin-top: 10upx;
					line-height: 1;
				}
			}
		}
	}

	.section {
		.title-1 {
			font-size: 32upx;
			font-weight: bold;
			color: #141414;
			padding: 40upx 0 30upx;
		}

		.card {
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 40upx 30upx;
		}
	}

	.section-2 {
		.card {
			@include flex-between;

			.item {
				flex: 1;
			}
		}

		.title {
			font-size: 26upx;
			color: #999999;
			margin-bottom: 40upx;
		}

		.num {
			font-size: 52upx;
			font-weight: 500;
			line-height: 70upx;
			color: #333333;
			letter-spacing: 4upx;
		}

		.num-1 {
			font-size: 52upx;
			font-weight: 500;
			line-height: 70upx;
			color: #FF0000;
			letter-spacing: 4upx;
		}
	}

	.section-3 {
		.card {
			padding: 40upx 0;
			@include menu-list(4);

			.item {
				background: transparent;
				line-height: 1;

				image {
					width: 60upx;
					height: 60upx;
					line-height: 1;
				}

				view {
					font-size: 24upx;
					color: #333333;
					margin-top: 10upx;
					line-height: 1;
				}
			}

			.item:after {
				content: '';
				border: 0;

			}
		}
	}

	/deep/ .u-drawer-bottom {
		background: transparent !important;
	}
</style>
